<template>
  <el-popover
    placement="top-start"
    popper-class="user_popover"
    width="260"
    trigger="click"
    style="transform: translateY(4px); margin-right: 16px"
  >
    <div class="userinfo_wrap">
      <div class="top_info">
        <div class="top_img">
          <i class="el-icon-user" />
        </div>
        <div class="top_text">
          <span style="font-size: 16px">{{ userInfo.userName }}</span>
        </div>
      </div>
      <div class="user_content_wrap">
        <div class="user_content_item user_item_hover" @click="editPasswd">修改密码</div>
        <div class="user_content_item user_item_hover" style="border-bottom: none" @click="logoutClick">
          退出登录
        </div>
      </div>
    </div>
    <span slot="reference" class="avatar_text">{{ userInfo.name }}
      <i class="el-icon-caret-bottom" />
    </span>
  </el-popover>
</template>

<script>
import { mapGetters } from 'vuex'
import { adminGetInfo } from '@/api/asrcharg/users'
export default {
  name: 'UserInfo',
  data() {
    return {
      loading: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    // this.adminGetInfo()
  },
  methods: {
    async adminGetInfo() {
      this.loading = true
      try {
        const res = await adminGetInfo()
        if (res.success) {
          this.userInfo = res.data
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    copyClick(text, label) {
      const input = document.createElement('input') // js创建一个input输入框
      input.value = text // 将需要复制的文本赋值到创建的input输入框中，this.ruleForm.url这个是我要复制的内容
      document.body.appendChild(input) // 将输入框暂时创建到实例里面
      input.select() // 选中输入框中的内容
      document.execCommand('Copy') // 执行复制操作
      document.body.removeChild(input) // 最后删除实例中临时创建的input输入框，完成复制操作
      this.$message({
        message: `已成功复制${label}`,
        type: 'success'
      })
    },
    editPasswd() {
      this.$router.push('/user/password')
    },
    async logoutClick() {
      this.$store.dispatch('tagsView/delAllViews')
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/variables.scss';
.userinfo_wrap {
  .top_info {
    background-color: #4f7afd;
    color: #fff;
  }
}
.user_popover {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  .popper__arrow {
    display: none;
  }
}
.avatar_text {
  color: $navbarText;
  cursor: pointer;
}
.userinfo_wrap {
  display: flex;
  flex-direction: column;
  .top_info {
    display: flex;
    padding: 20px;
    .top_img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #fff;
    }
    .top_text {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
    }
  }
  .user_content_wrap {
    display: flex;
    flex-direction: column;
    .user_content_item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      padding: 16px 22px;
    }
    .user_item_text {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .copy_icon {
      cursor: pointer;
    }
    .user_item_hover {
      cursor: pointer;
      &:hover {
        color: #4f7afd;
      }
    }
  }
  .top_img {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #a7a7a7;
  }
}
</style>
